<template>
  <div class="container" v-if="show">
    <div class="box">
      <header>
        <slot name="header">{{ title }}</slot>
      </header>
      <main>
        <slot name="main">
          姓名 <tan-input v-model="form.name" /> 手机号
          <tan-input v-model="form.telephone" /> 地址
          <tan-input v-model="form.address" /> 目的地
          <tan-input v-model="form.tag" />
        </slot>
      </main>
      <footer>
        <slot name="footer">
          <div class="btns">
            <tan-button class="btn1" width="120px" height="50px" @click="cancel"
              >取消</tan-button
            >
            <tan-button primary width="120px" height="50px" @click="confirm"
              >确定</tan-button
            >
          </div>
        </slot>
      </footer>
    </div>
  </div>
</template>
<script>
export default {
  name: "dialog",
  components: {
    "tan-input": () => import("@/components/input.vue"),
  },
  props: {
    title: {
      type: String,
      default: "添加地址",
    },
    show: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      form: {
        name: "",
        telephone: "",
        address: "",
        tag: "",
      },
    };
  },
  methods: {
    cancel() {
      this.$emit("cancel");
      this.form = {
        name: "",
        telephone: "",
        address: "",
        tag: "",
      };
    },
    confirm() {
      console.log(this.form);
      this.$emit("confirm", this.form);
      this.form = {
        name: "",
        telephone: "",
        address: "",
        tag: "",
      };
    },
    getContact(contact) {
      this.form = {...contact}
    }
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  padding: 30px;
}
.box {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 650px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
header {
  padding: 30px 0 10px 40px;
  font-size: 20px;
  color: "#303133";
}
main {
  padding: 40px;
  min-height: 300px;
  box-sizing: border-box;
}
footer {
  height: 80px;
}
.btn1 {
  margin-right: 20px;
}
.btns {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 0 20px;
}
</style>